<!DOCTYPE html>
<style>
#container {
  height: 400px;
  text-align: center;
  background-color: lime;
}
#child {
  height: 100%;
}
</style>

<p>
Tests that a replaced child with percentage height should keep the aspect ratio
when the size of its container changes.
</p>

<div id="container">
  <img id="child" src="resources/square-blue-100x100.png" data-expected-width="200" />
</div>

<script src="../../resources/check-layout.js"></script>

<script>
function runTest() {
  document.body.offsetTop;
  var container = document.getElementById('container');
  container.style.height = "200px";
  document.body.offsetTop;
  checkLayout("#container");
}
window.onload = runTest;
</script>
